<template>
  <div>
    <el-dialog
      title="编辑用户信息"
      :visible.sync="dialogEdit.show">
      <el-form ref="editUserInfoForm" :model="editForm" :rules="rules" label-width="80px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input v-model="editForm.author"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="editForm.price"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="dialogFormEdit('editUserInfoForm')">保存</el-button>
          <el-button @click="dialogEdit.show = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'editUser',
    props: {
      dialogEdit: {},
      editForm: Object
    },
    data () {
      return {
        rules: {
          name: [
            {required: true, message: '请输入姓名', trigger: 'blur'},
            {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
          ],
          author: [
            {required: true, message: '请输入作者', trigger: 'blur'},
            {min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur'}
          ],
          price: [
            {required: true, message: '请输入价格', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      dialogFormEdit (form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            this.$axios.put('/api/books/'+ this.editForm.id, this.editForm).then(res => {
              this.$message({
                type: 'success',
                message: '编辑信息成功'
              })
              this.dialogEdit.show = false
              this.$emit('update')
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    },
    created () {

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
